<template>
  <TableView
    ref="tableView"
    :table-attrs="{ api: getList, descs: ['create_time'] }"
    form-path="/asset/fyassetsupplier/vsupplierForm/{id:-1}"
    :search-model="searchForm"
    :toolbar-attrs="{
      buttons: [
        'slot',
        { del: permissions.vsupplier_fyassetsupplier_del, create: permissions.vsupplier_fyassetsupplier_add }
      ]
    }"
    :delete-api="batchDelete">
    <template #toolbar-button>
      <ToolbarButton
        v-if="permissions.vsupplier_fyassetsupplier_export"
        type="primary"
        icon="el-icon-download"
        label="导出"
        @click="exportExcel()" />
    </template>
    <template #columns>
      <TableColumn label="名称" clickable prop="name" />
      <TableColumn label="厂商描述" prop="description" />
      <TableColumn label="评价结果" clickable prop="evaluateGrade" />
      <TableColumn label="厂商地址" prop="contactAddress" />
      <TableColumn label="联系人" prop="contactor" width="80" />
      <TableColumn label="联系电话" prop="contactTelephone" width="100" />
      <TableColumn label="传真电话" prop="contactFaxno" width="100" />
      <TableColumn label="电子邮件" prop="contactEmail" />
      <TableColumn label="厂商地址" prop="weburl" />
      <TableColumn label="邮政编码" prop="contactZipcode" width="100" />
      <TableColumn label="开启银行" prop="bank" />
      <TableColumn label="开户帐号" prop="bankAccount" />
      <TableColumn label="税号" prop="dutyParagraph" />
    </template>
    <template #search-form>
      <FormInput v-model="searchForm.name" label="名称" prop="name" />
      <FormInput v-model="searchForm.contactAddress" label="厂商地址" prop="contactAddress" />
      <FormInput v-model="searchForm.contactor" label="联系人" prop="contactor" />
      <FormInput v-model="searchForm.contactTelephone" label="联系电话" prop="contactTelephone" />
      <FormInput v-model="searchForm.contactFaxno" label="传真电话" prop="contactFaxno" />
    </template>
  </TableView>
</template>

<script>
  import { mapState } from 'vuex'
  import { services } from '@/config'
  import { fetchList, batchDelete } from '@/api/asset/fyassetsupplier'

  export default {
    name: 'MsupplierView',
    data() {
      return {
        searchForm: {
          name: '',
          contactAddress: '',
          contactor: '',
          contactTelephone: '',
          contactFaxno: ''
        }
      }
    },
    computed: {
      ...mapState('user', ['permissions'])
    },
    methods: {
      batchDelete,
      async getList(page) {
        this.searchForm.type = 'V'
        return fetchList(
          Object.assign(
            {
              descs: ['create_time'],
              current: page.current,
              size: page.size
            },
            this.searchForm
          )
        )
      },
      //  导出excel
      exportExcel() {
        this.$downBlobFile(
          `${services.assetService}fyassetsupplier/exportV`,
          this.searchForm,
          `厂商管理${this.$dateFormat(new Date())}.xlsx`
        )
      }
    }
  }
</script>
